<template>
	<view class="box">
		<z-paging ref="paging" @onRefresh="onRefresh" @query="query" v-model="list" :auto="false"
			empty-view-img="http://cdn.uviewui.com/uview/empty/data.png" :empty-view-style="{'margin-bottom':'100rpx'}">
			<u-gap :height="15"></u-gap>
			<view class="header" v-if="type == 1">
				<view class="header-card">
					<view>
						<view class="header-card-tx">入圈收益</view>
						<view class="header-card-num">￥{{info.rq || 0}}</view>
					</view>
					<view>
						<view class="header-card-tx">带货收益</view>
						<view class="header-card-num">￥{{info.dh || 0}}</view>
					</view>
					<view>
						<view class="header-card-tx">活动收益</view>
						<view class="header-card-num">￥{{info.hd || 0}}</view>
					</view>

				</view>
				<view class="header-c">
					<view>
						<view class="header-c-tx">知识付费</view>
						<view class="header-c-num">￥{{info.zs || 0}}</view>
					</view>
					<view>
						<view class="header-c-tx">vip收益</view>
						<view class="header-c-num">￥{{info.vip || 0}}</view>
					</view>
					<view>
						<view class="header-c-tx">创建圈子收益 </view>
						<view class="header-c-num">￥{{info.qz || 0}}</view>
					</view>
				</view>
				<view class="header-c">
					<view>
						<view class="header-c-tx">用户月消费</view>
						<view class="header-c-num">￥{{info.user_yxf || 0}}</view>
					</view>
					<view>
						<view class="header-c-tx">用户总消费</view>
						<view class="header-c-num">￥{{info.user_zxf || 0}}</view>
					</view>
					<view>
						<view class="header-c-tx">用户数量</view>
						<view class="header-c-num">{{info.user_count || 0}}</view>
					</view>
				</view>
				<view class="header-c">
					<view>
						<view class="header-c-tx">总收益</view>
						<view class="header-c-num">￥{{info.zsy || 0}}</view>
					</view>
					<view>

					</view>
					<view></view>
				</view>

				<view class="header-rule">
					{{info.content}}
				</view>
			</view>
			<view class="tabs">
				<u-tabs :list="list4" lineWidth="30" lineColor="#00B66F" :current="current" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="change">
				</u-tabs>
			</view>
			<view class="search" v-if="current != 3">
				<!-- <view class="search-tx">新用户列表</view> -->
				<view class="search-input">
					<image :src="ossUrl +  '/static/image/s11.png'" mode=""></image>
					<input type="text" placeholder="关键字进行筛选" placeholder-class="search-input-ac"
						v-model="params.nickname" @input="reload" />
				</view>
			</view>
			<block v-if="type == 1">
				<userVue ref="userVueRef" v-if="current === 0" :list="list" />
				<Order ref="OrderRef" v-if="current === 1" :list="list" />
				<Products ref="ProductsRef" v-if="current === 2" :list="list" @reload="reload" @recommend="recommend" />
				<tableVue ref="tableVueRef" v-if="current === 3" :list="list" />
			</block>
			<block v-else>
				<Order ref="OrderRef" v-if="current + 1 === 1" :list="list" />
				<Products ref="ProductsRef" v-if="current + 1 === 2" :list="list" @reload="reload" @recommend="recommend" />
				<tableVue ref="tableVueRef" v-if="current + 1 === 3" :list="list" />
			</block>
		</z-paging>
	</view>
</template>

<script>
	import {
		InformationLianchuangList,
		InformationLianchuangData,
		goodsDeliveryOrder,
		goodsGoodsForSale,
		goodsCarryingData
	} from '@/common/http/api.js'
	import userVue from './page/user/user.vue';
	import Order from './page/order/order.vue';
	import Products from './page/products/products.vue';
	import tableVue from './page/table/table.vue';
	export default {
		components: {
			userVue,
			Order,
			tableVue,
			Products
		},
		data() {
			return {
				//分页
				params: {
					page: 1,
					nickname: ''
				},
				isList: true,
				list: [],
				info: '',
				//-------

				current: 0,
				isGoods: false,
				type: 1 //1联创 2带货
			};
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type
				if(this.type == 2) {
					uni.setNavigationBarTitle({
					　　title: '带货'
					})
				}
				this.$refs.paging.reload();
			}

			goodsGoodsForSale({
				page: 1
			}).then(res => {
				if (res.data.length > 0) {
					this.isGoods = true
				} else {
					this.isGoods = false
				}
			})
			InformationLianchuangData().then(res => {
				this.info = res.data
			})
		},
		computed: {
			list4() {
				if (this.type == 1) {
					return [{
							name: '新用户列表'
						},
						{
							name: '带货订单'
						},
						{
							name: '带货商品',
						},
						{
							name: '带货数据'
						}
					]
				} else {
					return [

						{
							name: '带货订单'
						},
						{
							name: '带货商品',
						},
						{
							name: '带货数据'
						}
					]
				}
			}
		},
		methods: {
			recommend(it, index) {
				console.log('paging', this.$refs.paging)
				if (this.list[index].recommend === 0) {
					this.list[index].recommend = 1
				} else {
					this.list[index].recommend = 0
				}

			},
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				this.pjInit(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
				//this.reload(true)
			},
			pjInit(pageNo, pageSize) {

				const params = {
					page: pageNo
				}
				let http = null
				let current = this.type == 1 ? this.current : this.current + 1
				switch (current) {
					case 0:
						params['nickname'] = this.params.nickname
						http = InformationLianchuangList
						break;
					case 1:
						params['name'] = this.params.nickname
						http = goodsDeliveryOrder
						break;
					case 2:
						params['name'] = this.params.nickname
						http = goodsGoodsForSale
						break;
					case 3:
						params['nickname'] = this.params.nickname
						http = goodsCarryingData
						break;
					default:
						break;
				}
				if(params.page==3&&current==3){
					
					this.$refs.paging.complete([]);
					return
				}

				
				http(params).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			change(e) {

				console.log('e', e)
				this.params.nickname = ''
				this.current = e.index
				this.$refs.paging.reload();
			},
			reload() {
				this.$refs.paging.reload();
			},
			init() {
				uni.showLoading()
				InformationLianchuangList(this.params).then(res => {
					uni.hideLoading()
					if (Array.isArray(res.data) && res.data.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.isList = false
					}
				})
			},

			toPage(it) {
				uni.redirectTo({
					url: '/pagesA/posterDesign/add?id=' + it.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F7F8;
	}

	.search {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 25rpx;
		margin: 30rpx 0;

		.search-tx {
			flex: 1;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #211C1E;
		}

		.search-input {
			width: 100%;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 15rpx 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 17rpx;
			}

			input {
				flex: 1;
				min-width: 0;

				input {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}

				.search-input-ac {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}

	.box {
		width: 100%;
		min-height: 100vh;
		background: #f8f8f8;
	}

	.header {
		width: 690rpx;
		background: #17C581;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 44rpx;

		.header-card {
			background: #00B66F;
			border-radius: 20rpx;
			display: flex;
			box-sizing: border-box;
			padding: 25rpx 27rpx;

			&>view {
				flex: 1;
			}

			.header-card-tx {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-bottom: 48rpx;
			}

			.header-card-num {
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}

		.header-c {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			padding: 25rpx 27rpx;

			&>view {
				flex: 1;
			}

			.header-c-tx {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.header-c-num {
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}

		.header-rule {
			width: 624rpx;
			margin: 0 auto;
			padding: 28rpx 0;
			border-top: 1rpx solid #fff;
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
</style>